<template>
	<div class="container">
		<el-table
			v-loading="tableLoading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			class="small-size-table"
			border
			:data="tableData"
			style="width: 100%"
			:header-cell-style="getRowClass"
			highlight-current-row
			header-align="center"
			:max-height="tableHeight"
		>
			<el-table-column
				type="index"
				:label="`${$t('dxn.game_rule.serial_number')}`"
				width="60"
				align="center"
			/>
			<el-table-column
				:label="`${$t('dxn.card_ables_list.table_id')}`"
				min-width="180"
				align="center"
			>
				<template slot-scope="scope">
					<div
						v-if="
							!!scope.row.tableId ||
								scope.row.tableId + '' === '0'
						"
						class="blueColor decoration"
						@click="
							handleJump({
								path:
									'/dxn/gameManager/cardTablesList/cardTablesBase',
								query: {
									tableId: scope.row.tableCode
								}
							})
						"
					>
						{{ scope.row.tableCode }}
					</div>
					<div v-else>-</div>
				</template>
			</el-table-column>
			<el-table-column
				:label="`${$t('dxn.card_ables_list.table_name')}`"
				min-width="130"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.tableName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				:label="`${$t('dxn.card_ables_list.table_state')}`"
				min-width="100"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ statusMap[scope.row.status] || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				:label="`${$t('dxn.card_ables_list.netAmount')}`"
				min-width="120"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span :style="handleNumberColor(scope.row.costTotal)">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.costTotal
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="name"
				label="牌桌总带入"
				min-width="120"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.bringInChipScore
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="name"
				:label="
					`${$t(
						'dxn.card_ables_list.number_of_times_members_have_brought_in'
					)}`
				"
				min-width="100"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span>
						{{ scope.row.userBringCount + '' || '-' }}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				label="鱿鱼钱包带入"
				min-width="130"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.squidBringInChipScore
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				:label="`${$t('dxn.card_ables_list.start_time')}`"
				min-width="160"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ parseTime(scope.row.tableBeginTime) }}
				</template>
			</el-table-column>
			<el-table-column
				:label="`${$t('dxn.card_ables_list.end_time')}`"
				min-width="160"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ parseTime(scope.row.tableEndTime) }}
				</template>
			</el-table-column>
			<el-table-column
				:label="`${$t('dxn.card_ables_list.game_name')}`"
				min-width="100"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<!-- {{ gameTypeMap[scope.row.gameTypeId] || '-' }} -->
					{{ typeFilter(scope.row.gameTypeId, 'gameTypes') }}
				</template>
			</el-table-column>
			<el-table-column
				:label="`${$t('dxn.card_ables_list.club_id')}`"
				min-width="100"
				align="center"
			>
				<template slot-scope="scope">
					<div
						v-if="scope.row.clubId"
						class="blueColor decoration"
						@click="
							handleJump({
								path: '/dxn/clubManager/clubList',
								query: {
									clubId: scope.row.clubId
								}
							})
						"
					>
						{{ scope.row.clubId }}
					</div>
					<div v-else>-</div>
				</template>
			</el-table-column>
			<el-table-column
				fixed="right"
				:label="`${$t('dxn.card_ables_list.operate')}`"
				min-width="100"
				align="center"
			>
				<template slot-scope="scope">
					<el-button
						type="primary"
						size="small"
						@click="
							handleJump({
								path:
									'/dxn/gameManager/cardTablesList/cardTablesBase',
								query: {
									tableId: scope.row.tableCode
								}
							})
						"
					>
						{{ $t('dxn.card_ables_list.more') }}
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		tableHeight: { type: [String, Number], default: 480 },
		tableData: {
			type: Array,
			default: () => []
		},
		tableLoading: {
			type: Boolean,
			default: false
		},
		gameList: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			statusMap: {
				0: '未开始',
				1: '进行中',
				2: '已结束'
			}
		}
	},
	computed: {
		// gameTypeMap() {
		// 	if (Array.isArray(this.gameList) && this.gameList.length) {
		// 		const obj = {}
		// 		this.gameList.map((item) => {
		// 			obj[item.gameTypeId] = item.gameName
		// 		})
		// 		return obj
		// 	} else {
		// 		return '-'
		// 	}
		// }
	},
	methods: {
		// 跳转
		handleJump(obj) {
			this.$router.push(obj)
		}
	}
}
</script>

<style lang="scss" scoped>
.decoration {
	text-decoration: underline;
	cursor: pointer;
}
</style>
